<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>用户信息新增</title>
    <style rel="stylesheet">
        #maindiv {
            margin-top: 10px;
            width: 90%;
        }
    </style>
    <!--引入bootstrap的css文件-->
    <!--<link href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css" rel="stylesheet">-->
    <link th:href="@{/bootstrap-3.3.7-dist/css/bootstrap.min.css}" rel="stylesheet">
    <!--引入jquery，注意：jquery要在js文件之前引入，因为bootstrap使用了jquery框架-->
    <script type="text/javascript"
            th:src="@{/jQuery-1.12.4/jquery-1.12.4.js}"></script>
    <!--引入bootstrap的js文件-->
    <!--<script src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js"></script>-->
    <script th:src="@{/bootstrap-3.3.7-dist/js/bootstrap.min.js}"></script>

    <!-- 引入分页插件-->
    <link th:href="@{/pagination-2.1.4/css/pagination.css}" rel="stylesheet">
    <script th:src="@{/pagination-2.1.4/js/pagination.min.js}"></script>

    <!--引入弹出模态框的插件-->
    <link th:href="@{/BootstrapEx/css/bootstrapEx.css}" rel="stylesheet">
    <script th:src="@{/BootstrapEx/js/bootstrapEx.js}"></script>
    <!--ajax进行增删改查操作-->
    <script type="text/javascript">
        //////////////////////////////////////////////////////////////////////////////////////////////////////

        // 使用ajax进行查询
        function doAjaxQuery() {
            // 使用ajax进行查询
            $.ajax({
                type: "POST", // 请求类型
                //url: "doAjaxUserInfoQueryByPramas?name=John&location=Boston",  // get的传参方式
                url: "doAjaxUserInfoQueryByPramas", // 和form表单的 action属性一样
                //data: "name=John&location=Boston", // post的传参方式，可以使用jquery提供的 $("form").serialize() 方法进行处理
                data: $("#form1").serialize(),
                // 指定服务器响应的数据类型  json html xml text
                dataType: "json",
                success: function (data) { // ajax的请求成功的回调处理， data就是从服务器返回的影响内容
                    // 拼写需要显示的dom组件的内容
                    var strContent = "";

                    if (data) {
                        // 将ajax查询的json数据，使用分页插件进行处理

                        $('#myPaging').pagination({
                            dataSource: data, // 分页的数据源
                            pageSize: 5, // 每一页显示的记录条数
                            pageNumber: 1, // 开始定位在第1页
                            callback: function (eachPageData, pagination) { // 每次翻页的时候的回调函数
                                // 清空局部变量 strContent
                                strContent = "";

                                // 遍历data的json数据进行解析显示
                                $.each(eachPageData, function (index, eachValue) {
                                    strContent += "<tr>";
                                    strContent += "<th scope='row'>" + (index + 1) + "</th>";
                                    strContent += "<td>" + eachValue.username + "</td>";
                                    strContent += "<td>" + eachValue["userage"] + "</td>";
                                    strContent += "<td>" + eachValue.useraddress + "</td>";
                                    strContent += "<td>" + eachValue.userregdate + "</td>";
                                    strContent += "<td><img style=\"width: 30px;height: 30px\" src='" + eachValue.userimg + "'></img></td>";
                                    strContent += "<td><button type=\"button\" class=\"btn btn-default\" onclick='showModal4Modify(" + JSON.stringify(eachValue) + ")'>修改</button></td>";
                                    strContent += "<td><button type=\"button\" class=\"btn btn-default\" onclick='deleteData(" + eachValue.userid + ")'>删除</button></td>";
                                    strContent += "</tr>";
                                });
                                // 显示每一页的内容
                                // 将拼接内容显示到指定的控件中
                                // 局部刷新浏览器的dom对象
                                $("#displayMe").html(strContent);
                            }
                        });
                    }
                    // console.info("ajax查询结果：")
                    // console.info(data);
                },
                error: function () {
                    console.log("ajax查询错误！")
                }
            });
        }

        //////////////////////////////////////////////////////////////////////////////////////

        // 显示新增和修改的模态框
        // 如果传递的参数数据不为null或者undefined，则说明是进行修改操作，否则，进行新增操作
        function showModal4Modify(eachValue) {
            /*
            window.localStorage - 存储没有截止日期的数据:
            localStorage 对象存储的是没有截止日期的数据。当浏览器被关闭时数据不会被删除，在下一天、周或年中，都是可用的。
            window.sessionStorage - 针对一个 session 来存储数据（当关闭浏览器标签页时数据会丢失）
            sessionStorage 对象等同 localStorage 对象，不同之处在于只对一个 session 存储数据。如果用户关闭具体的浏览器标签页，数据也会被删除。
             */
            console.info("showModal4Modify");
            console.info(eachValue);
            // show modal
            // $('#myModal').modal({
            //     "show":true,
            // });
            $('#myModal').modal('show');
            // fill data for modify
            fillModal4Modify(eachValue);

            $("#saveModify").on("click", function () {
                // save modal data via ajax with file upload
                saveModal();
            });

            // listen event of modal
            $('#myModal').on('shown.bs.modal', function (e) {
                console.log("shown modal");
            })


        }

        ///////////////////////////////////////////////////////////////////
        function fillModal4Modify(eachValue) {
            // 如果 eachValue 没有数据，则说明是新增操作
            // 如果传递的参数数据不为null或者undefined，则说明是进行修改操作，否则，进行新增操作
            var eachBean = eachValue || {};
            console.log("eachValue:::::::::::::");
            console.log(eachValue);

            // 进行dom操作将需要修改的数据显示在修改页面的form表单中
            $("#modal_userid").val(eachBean.userid); // 用于标识是新增还是修改
            $("#modal_username").val(eachBean.username);
            $("#modal_userpsw").val(eachBean.userpsw);
            $("#modal_userage").val(eachBean.userage);
            $("#modal_useraddress").val(eachBean.useraddress);
            $("#modal_userregdate").val(eachBean.userregdate);
            //$("#modal_userimg").val(eachBean.userimg); // 因为图片不能修改，因为没有上传的源文件；
            // 图片处理原则： 如果重新选择图片则覆盖之前的图片，如果不选择图片，则保留之前的图片
        }

        // 使用ajax保存form表单
        function saveModal2() {
            console.info("saveMeeeeeeeeeeeeeeeeeeeeeee");
        }

        // 使用ajax保存form表单
        function saveModal() {
            console.info("saveMeeeeeeeeeeeeeeeeeeeeeee");
            // ajax进行文件上传
            //创建一个FormData对象：用一些键值对来模拟一系列表单控件：即把form中所有表单元素的name与value组装成一个queryString
            // ajax文件上传使用ForData作为数据载体发送后台请求
            var formData = new FormData($("#modifyform")[0]);
            //console.log("formdataaaaaaaaaaaaaaaaaaaaaaaaaaa")
            //console.log(formData);
            $.ajax({
                type: "POST", // 请求类型
                url: "saveOrUpdateUserinfoViaAjax", // 和form表单的 action属性一样
                //data: "name=John&location=Boston", // post的传参方式，可以使用jquery提供的 $("form").serialize() 方法进行处理
                data: formData,
                ////////////////////////////////////////////////////////
                contentType: false, //必须false才会自动加上正确的Content-Type,否则服务器无法识别
                /*
                    processData必须false才会避开jQuery对 formdata 的默认处理
                   XMLHttpRequest会对 formdata 进行正确的处理
                */
                processData: false,
                ///////////////////////////////////////////////////////
                // 指定服务器响应的数据类型  json html xml text
                dataType: "json",
                success: function (data) {
                    console.log("file upload ok!")
                    alert(data.msg);
                    // 关闭模态框
                    // close modal
                    $('#myModal').modal('hide');
                }
            });
        }

        ////////////////////////////////////////////////////////////////////////////////////////////////////
        function deleteData(userid) {
            // 使用ajax删除数据
            var r = confirm("是否确定删除该记录？")
            if (r == true) {
                $.post("doAjaxUserInfoDeleteByID", {"userid": userid}, function (data) {
                    // 可以选择弹出框进行提示，也可以不作处理
                    if (data && data == "1") {
                        // 删除成功
                        alert("删除成功");
                        // 重新查询，更新数据
                        doAjaxQuery();
                        // 课下作业：注意页码如何记录
                    } else {
                        alert("删除失败");
                    }
                });
            }
        }
    </script>

</head>
<body>
<div id="maindiv" style="margin: 10px auto">
    <div id="formdiv">
        <form id="form1" class="form-horizontal">

            <div class="form-group">
                <label class="col-sm-2 control-label">姓名</label>
                <div class="col-sm-4">
                    <input type="text" class="form-control" id="username" name="username" placeholder="请输入姓名">
                </div>

                <label class="col-sm-2 control-label">年龄</label>
                <div class="col-sm-4">
                    <div class="col-sm-5">
                        <input type="text" class="form-control" id="userage" name="userage" placeholder="请输入开始年龄">
                    </div>
                    <div class="col-sm-2">-
                    </div>
                    <div class="col-sm-5">
                        <input type="text" class="form-control" id="userage2" name="userage2" placeholder="请输入结束年龄">
                    </div>
                </div>
            </div>

            <div class="form-group">
                <label class="col-sm-2 control-label">地址</label>
                <div class="col-sm-4">
                    <input type="text" class="form-control" id="useraddress" name="useraddress" placeholder="请输入地址">
                </div>
                <label class="col-sm-2 control-label">注册日期</label>
                <div class="col-sm-2">
                    <input type="datetime-local" class="form-control" id="userregdate" name="userregdate"
                           placeholder="请选择开始日期">
                </div>
                <div class="col-sm-2">
                    <input type="datetime-local" class="form-control" id="userregdate2" name="userregdate2" placeholder="请选择结束日期">
                </div>
            </div>

            <div class="form-group">
                <div class="col-sm-offset-2 col-sm-2">
                    <button type="button" class="btn btn-default" onclick="doAjaxQuery()">查询</button>
                </div>
                <div class="col-sm-offset-8 col-sm-2">
                    <button type="button" class="btn btn-default" onclick="showModal4Modify()">新增</button>
                </div>
            </div>
        </form>
    </div>

    <div class="row" style="height: 400px;">
        <div class="col-sm-12">
            <table class="table table-hover">
                <thead>
                <tr>
                    <th>序号</th>
                    <th>姓名</th>
                    <th>年龄</th>
                    <th>地址</th>
                    <th>注册日期</th>
                    <th>头像</th>
                    <th>修改</th>
                    <th>删除</th>
                </tr>
                </thead>
                <tbody id="displayMe">
                <!--此处有jquery通过ajax查询之后的回调函数进行局部刷新操作-->

                </tbody>
            </table>
        </div>
    </div>
    <div class="row">
        <div class="col-sm-12" id="myPaging">
            <!--分页插件需要显示的内容，运行时动态添加-->
        </div>
    </div>
</div>

<!--modal 模态框
bootstrap：
千万不要在一个模态框上重叠另一个模态框。要想同时支持多个模态框，需要自己写额外的代码来实现。
务必将模态框的 HTML 代码放在文档的最高层级内（也就是说，尽量作为 body 标签的直接子元素），以避免其他组件影响模态框的展现和/或功能。
-->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog">
    <div class="modal-dialog modal-lg" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span>
                </button>
                <h4 class="modal-title" id="exampleModalLabel">用户信息管理</h4>
            </div>
            <div class="modal-body">
                <form id="modifyform" class="form-horizontal">
                    <!--使用隐藏表单，保存主键字段；用于区分是新增还是修改-->
                    <input type="hidden" class="form-control" id="modal_userid" name="userid">

                    <div class="form-group">
                        <label class="col-sm-2 control-label">姓名</label>
                        <div class="col-sm-4">
                            <input type="text" class="form-control" id="modal_username" name="username"
                                   placeholder="请输入姓名">
                        </div>

                        <label class="col-sm-2 control-label">密码</label>
                        <div class="col-sm-4">
                            <input type="password" class="form-control" id="modal_userpsw" name="userpsw"
                                   placeholder="请输入密码">
                        </div>
                    </div>

                    <div class="form-group">
                        <label class="col-sm-2 control-label">年龄</label>
                        <div class="col-sm-4">
                            <input type="text" class="form-control" id="modal_userage" name="userage"
                                   placeholder="请输入年龄">
                        </div>

                        <label class="col-sm-2 control-label">地址</label>
                        <div class="col-sm-4">
                            <input type="text" class="form-control" id="modal_useraddress" name="useraddress"
                                   placeholder="请输入地址">
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-sm-2 control-label">注册日期</label>
                        <div class="col-sm-4">
                            <input type="datetime-local" class="form-control" id="modal_userregdate" name="userregdate"
                                   placeholder="请选择日期">
                        </div>

                        <label class="col-sm-2 control-label">头像</label>
                        <div class="col-sm-4">
                            <!--注意：file控件的anme属性，不要和实体类bean的属性字段一样，否则会直接把文件流赋值给该字段，造成数据类型转换错误-->
                            <!--默认映射规则：那么属性采用 file_属性名  方式进行命名（属性名就是实体类的成员变量名）-->
                            <input type="file" class="form-control" id="modal_userimg" name="file_userimg"
                                   placeholder="请选择头像">
                        </div>
                    </div>
                </form>
            </div>
            <div class="modal-footer">
                <button type="button" id="saveModify" class="btn btn-primary">更新</button>
                <button type="button" id="closeModify" class="btn btn-default" data-dismiss="modal">关闭</button>
            </div>
        </div>
    </div>
</div>

</body>
</html>
